<template>
  <div>
    <hd-tab :tabs="tabs"></hd-tab>
    <el-card :body-style="{ padding: '10px' }" class="box-card"
             shadow="never"
    >
      <div class=" my-1 clearfix flex justify-between items-center border-bottom border-b-2">
        <span>商品列表</span>
        <xhp-product-search :keyword="keyword" :products="products" @update="update"></xhp-product-search>
      </div>
      <el-table
          :data="products.data"
          border
          empty-text
          size="mini"
          style="width: 100%">
        <el-table-column
            label="id"
            prop="id"
            width="180">
        </el-table-column>
        <el-table-column
            label="名称"
            prop="name"
            width="180">
        </el-table-column>
        <el-table-column
            label="单位"
            prop="unit">
        </el-table-column>
        <el-table-column
            #default="{row:product}"
            label="描述"
        >
          {{ product.description|ellipsis_Title }}
        </el-table-column>
        <el-table-column
            #default="{row:product}"
            align="center"
            label="预览图"
        >
          <el-popover
              v-if="product.image"
              :content="product.name"
              class="flex justify-center"
              height="200"
              placement="right-end"
              trigger="hover" width="200">
            <img slot="reference" :src="product.image" class="w-8 h-8 object-cover text-center"/>
            <el-image
                :src="product.image"
                fit="contain"
            >
            </el-image>

          </el-popover>

        </el-table-column>
        <el-table-column
            #default="{row:product}"
            label="创建时间">
          {{ product.created_at | dateFormat }}
        </el-table-column>
        <el-table-column
            #default="{row:product}"
            label="修改时间">
          {{ product.updated_at | dateFormat }}
        </el-table-column>
        <el-table-column
            label="分类"
            prop="category_name">
        </el-table-column>
        <el-table-column
            label="价格(元)"
            prop="perprice">
        </el-table-column>
        <el-table-column
            #default="{row:product}"
            label="操作"
        >
          <el-button-group>
            <el-button size="mini" type="success" @click="edit(product)">
              <i class="el-icon-edit"></i>编辑
            </el-button>
            <el-button size="mini" type="danger" @click="del(product)">
              <i class="el-icon-delete"></i>删除
            </el-button>
          </el-button-group>
        </el-table-column>

      </el-table>

      <div class="block">
        <el-pagination
            v-if="products.meta"
            :current-page="products.meta.current_page"
            :page-size="10"
            :total="products.meta.total"
            background
            layout="total,prev, pager, next"
            @current-change="page"
        >
        </el-pagination>
      </div>


    </el-card>
  </div>
</template>

<script>
import tabs from './tabs'

export default {
  data() {
    return {
      tabs,
      keyword: '',
      products: []
    }
  },
  async created() {
    this.products = await this.axios.get('admin/product')
  },
  methods: {
    async page(page = 1) {
      let url = `admin/product?page=${page}`
      this.products = await this.axios.get(url);
    },
    edit(product) {
      this.$router.push({name: 'admin.product.edit', params: {id: product.id}})
    },
    del(product) {
      this.$confirm(`确定删除【${product.name}】吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'danger'
      }).then(async () => {
        await axios.delete(`admin/product/${product.id}`)
      })
    },
    update(products) {
      this.products = products
    }

  }
}
</script>

<style scoped>

</style>